<template>
    <div class="header-content" :style="{'color': routeNmae}">
      <img src="@/assets/index/header-logo.png" class="header-logo" alt="logo">
      <div class="nav-content">
        <div class="nav-item" @click="goPage('index')">首页</div>
        <div class="nav-item" @click="goPage('bmsSp')">平台代理商</div>
        <div class="nav-item" @click="goPage('bmsAp')">资源供应商</div>
        <div class="nav-item" @click="goPage('dataCenter')">数据中心分布</div>
        <div class="nav-item" @click="goPage('helpCenter')">文档中心</div>
        <div class="nav-item" @click="goPage('about')">关于我们</div>
      </div>
      <div class="header-btn-content">
        <span class="btn-item">控制台</span>
        <span class="btn-item" @click="goPage('login')">登录</span>
        <span class="btn-item" @click="goPage('register')">注册</span>
        <span class="btn-item">English</span>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'IndexHeader',
    computed:{
      routeNmae(){
        let pageName = this.$route.name;
        let colorList = this.$store.state.app.headerColorBlackList;
        let color = '#ffffff';
        if(colorList.indexOf(pageName) === -1){
          color = '#ffffff'
        }else{
          color = '#333333'
        }
        return color;
      }
    },
    methods:{
      goPage:function (name) {
        this.$router.push({name: name});
      }
    }
  }
</script>

<style lang="less" scoped>
.header-content{
  width: 1380px;
  min-width: 1380px;
  margin: 0 auto;
  .header-logo{
    width: 125px;
  }
  .nav-content{
    display: inline-block;
    padding-left: 160px;
    .nav-item{
      display: inline-block;
      cursor: pointer;
      margin: 0 15px;
      /*color: #ffffff;*/
      font-size: 15px;
    }
  }
  .header-btn-content{
    display: inline-block;
    float: right;
    .btn-item{
      cursor: pointer;
      /*color: #ffffff;*/
      font-size: 15px;
      margin: 0 12px;
    }
  }
}
@media (max-width: 1400px) {
  .header-content{
    width: 100%;
  }
}
@media (max-width: 768px) {
  .header-content{
    .nav-content,.header-btn-content{
      display: none;
    }
  }
}
</style>